import { origin } from "@/config/config";
import { usePageEvent } from "@remax/framework-shared";
import { Button, Icon } from "annar";
import * as React from "react";
import { getStorageSync, View } from "remax/wechat";

type Props = {
  isLike: boolean;
  likeNumber: number;
  videoId: string;
  style?: React.CSSProperties;
};
export default (props: Props) => {
  const [color, setColor] = React.useState("#fff");
  const [likeNumber, setLikeNumber] = React.useState(props.likeNumber);

  usePageEvent("onLoad", () => {
    props.isLike ? setColor("#ff6666") : setColor("#fff");
  });

  React.useEffect(() => {
    props.isLike ? setColor("#ff6666") : setColor("#fff");
  }, [props.isLike]);

  return (
    <View
      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
    >
      <Button
        style={props.style}
        type="default"
        shape="circle"
        icon={<Icon type="likefill" size="75px" color={color} />}
        ghost
        onTap={() => {
          let loginInfo = getStorageSync("loginInfo");
          if (color === "#fff") {
            // 点赞
            wx.request({
              url: `${origin}/video/like/${props.videoId}`,
              header: {
                token: loginInfo.token,
              },
            });
            setLikeNumber((old: number) => old + 1);
            setColor("#ff6666");
          } else {
            // 取消点赞
            wx.request({
              url: `${origin}/video/unlike/${props.videoId}`,
              header: {
                token: loginInfo.token,
              },
            });
            setLikeNumber((old: number) => old - 1);
            setColor("#fff");
          }
        }}
      />
      <View style={{ color: "#fff", margin: "10px auto" }}>{likeNumber}</View>
    </View>
  );
};
